<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>常用代码集合</title>
  <script src="./js/jq.min.js"></script>
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <script src="./js/vue.js"></script>
  <link rel="stylesheet" href="./css/cssreset.css">
  <link rel="stylesheet" href="./css/common.css">

  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
    crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
</head>
<link rel="stylesheet" href="./css/model.css">

<body>
  <div id="app">
    <nav class="nav addShadow">
      <a href="http://st219.gitee.io/web_h5qianduanxuexiwangzhanjicheng" target="_black">h5学习大全</a>
    </nav>
    <div class="left_nav addShadow">
      <!-- 一级导航 -->
      <div v-for="(one,index) in data">
        <a :href="'#'+index" :name="index">{{one.name}}</a>
        <ul>
          <li v-for="(two,index2) in one.tableData">
            <a :href="'#'+index+'_'+index2">{{two.name}}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="right_content addShadow">
      <div v-for="(one,index) in data" :id="index" class="header_box">
        <header class="header_0">{{(index+1) }} {{one.name}}
          <span v-if="one.introduce">{{one.introduce}}</span>
          <span class="fr add btn btn-primary" @click="add(index)">增加</span>
        </header>
        <p class="code_0" v-if="one.isString&&one.code">{{one.code | remove_blank}}</p>
        <div v-if="one.isTable" class="table_box">
          <div v-for="(two,index2) in one.tableData" :id="index+'_'+index2" @mouseEnter="two.btnShow=true">
            <header class="header_1">{{(index+1)+'-'+(index2+1) }} {{two.name}}
              <span v-if="two.introduce">{{two.introduce}}</span>
              <span class="fr edit btn btn-primary" @click="edit(index,index2)">修改</span>
            </header>
            <p class="code_1">{{two.code}}</p>
            <footer>
              <a v-if="two.footerInfo.name" :href="two.footerInfo.url||'#'" :title="two.footerInfo.name||'created by STzhang'" target="_blank">{{two.footerInfo.name||'created by STzhang'}}</a>
            </footer>
          </div>
        </div>
        <footer>
          <a v-if="one.footerInfo.name" :href="one.footerInfo.url" :title="one.footerInfo.name" target="_blank">{{one.footerInfo.name}}</a>
        </footer>
      </div>
    </div>
    <!-- 弹框内容（用于修改或者添加） -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Modal title</h4>
          </div>

          <div class="modal-body">
            <div class="input-group input-group-lg">
              <span class="input-group-addon" id="sizing-addon1">标题</span>
              <input type="text" class="form-control" placeholder="标题" aria-describedby="sizing-addon1" v-model="editdata.name">
            </div>
            <div class="input-group input-group-lg">
              <span class="input-group-addon" id="sizing-addon1">用法</span>
              <input type="text" class="form-control" placeholder="用法" aria-describedby="sizing-addon1" v-model="editdata.introduce">
            </div>
            <div class="input-group input-group-lg">
              <span class="input-group-addon" id="sizing-addon1">代码</span>
              <input type="text" class="form-control" placeholder="代码" aria-describedby="sizing-addon1" v-model="editdata.code">
            </div>
            
            <div class="input-group input-group-lg">
              <span class="input-group-addon" id="sizing-addon1">底部地址</span>
              <input type="text" class="form-control" placeholder="代码" aria-describedby="sizing-addon1" v-model="editdata.code">
              <span class="input-group-addon" id="sizing-addon1">代码</span>
              <input type="text" class="form-control" placeholder="代码" aria-describedby="sizing-addon1" v-model="editdata.code">
            </div>

          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->


  </div>
</body>

</html>
<!-- <script src="./js/https.js"></script> -->
<script src="./js/commonjs.js">

</script>